<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="mall/header::head-fragment('NewBee商城-订单结算','order-detail')">
    <!-- 页面头部引入，包含页面标题和样式引用 -->
</head>
<link th:href="@{/mall/css/bootstrap-modal.css}" rel="stylesheet">
<!-- 引入自定义模态框样式 -->
<body>
<header th:replace="mall/header::header-fragment"></header>
<!-- 页面顶部导航栏 -->
<!-- nav -->
<nav th:replace="mall/header::nav-fragment"></nav>

<!-- personal -->
<div id="personal">
    <!-- 个人中心主容器 -->
    <div class="self-info center">
        <!-- sidebar -->
        <div th:replace="mall/personal-sidebar::sidebar-fragment"></div>
        <!-- 左侧个人中心菜单栏 -->

        <div class="intro fr">
            <!-- 右侧内容区域 -->
            <div class="uc-box uc-main-box">
                <div class="uc-content-box order-view-box">
                    <div class="box-hd">
                        <!-- 页面标题 -->
                        <h1 class="title">填写并核对订单信息</h1>

                        <!-- 错误提示区域 -->
                        <div th:if="${errorMsg}" class="alert alert-danger" role="alert" style="margin-top: 10px;">
                            <span th:text="${errorMsg}"></span>
                        </div>

                        <div class="more clearfix">
                            <div class="actions">
                                <!-- 提交订单按钮 -->
                                <a id="saveOrder" class="btn btn-small btn-primary" title="提交订单">提交订单</a>
                            </div>
                        </div>
                    </div>

                    <div class="box-bd">
                        <div class="uc-order-item uc-order-item-pay">
                            <div class="order-detail">
                                <!-- 订单进度条 -->
                                <div class="order-summary">
                                    <div class="order-progress">
                                        <ol class="progress-list clearfix progress-list-5">
                                            <li class="step step-done">
                                                <div class="progress"><span class="text">购物车</span></div>
                                                <div class="info"></div>
                                            </li>
                                            <li class="step step-active">
                                                <div class="progress"><span class="text">下单</span></div>
                                                <div class="info"></div>
                                            </li>
                                            <li class="step">
                                                <div class="progress"><span class="text">付款</span></div>
                                                <div class="info"></div>
                                            </li>
                                            <li class="step">
                                                <div class="progress"><span class="text">出库</span></div>
                                                <div class="info"></div>
                                            </li>
                                            <li class="step">
                                                <div class="progress"><span class="text">交易成功</span></div>
                                                <div class="info"></div>
                                            </li>
                                        </ol>
                                    </div>
                                </div>

                                <!-- 商品列表 -->
                                <table class="order-items-table">
                                    <tbody>
                                        <!-- 遍历商品项 -->
                                        <th:block th:each="item : ${items}">
                                            <tr>
                                                <td class="col col-thumb">
                                                    <div class="figure figure-thumb">
                                                        <a target="_blank" th:href="@{'/shopping/item/detail/'+${item.id}}">
                                                            <img th:src="@{${item.pic}}" width="80" height="80" alt="">
                                                        </a>
                                                    </div>
                                                </td>
                                                <td class="col col-name">
                                                    <p class="name">
                                                        <a target="_blank" th:href="@{'/shopping/item/detail/'+${item.id}}" th:text="${item.name}">newbee</a>
                                                    </p>
                                                </td>
                                                <td class="col col-price">
                                                    <p class="price" th:text="${item.price+'0元 x '+item.num}">1299元 × 1</p>
                                                </td>
                                                <td class="col col-actions"></td>
                                            </tr>
                                        </th:block>
                                    </tbody>
                                </table>
                            </div>

                            <!-- 收货地址信息 -->
                            <div id="editAddr" class="order-detail-info">
                                <h3>收货信息</h3>
                                <table class="info-table">
                                    <tbody>
                                        <tr>
                                            <th>收货地址：</th>
                                            <td class="user_address_label" th:text="${member.addressDetail==''?'无':member.addressDetail}">newbee</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="actions">
                                    <a class="btn btn-small btn-line-gray J_editAddr editMember">修改</a>
                                </div>
                            </div>

                            <!-- 支付方式信息 -->
                            <div id="editTime" class="order-detail-info">
                                <h3>支付方式</h3>
                                <table class="info-table">
                                    <tbody>
                                        <tr>
                                            <th>支付方式：</th>
                                            <td>在线支付</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="actions"></div>
                            </div>

                            <!-- 订单金额汇总 -->
                            <div class="order-detail-total">
                                <table class="total-table">
                                    <tbody>
                                        <tr>
                                            <th>商品总价：</th>
                                            <td><span class="num" th:text="${priceTotal}+'0'">1299.00</span>元</td>
                                        </tr>
                                        <tr>
                                            <th>运费：</th>
                                            <td><span class="num">0</span>元</td>
                                        </tr>
                                        <tr>
                                            <th class="total">应付金额：</th>
                                            <td class="total"><span class="num" th:text="${priceTotal}+'0'">1299.00</span>元</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 地址修改弹窗 -->
        <div class="modal fade" id="personalInfoModal" tabindex="-1" role="dialog" aria-labelledby="personalInfoModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h6 class="modal-title" id="personalInfoModalLabel">地址修改</h6>
                    </div>
                    <div class="modal-body">
                        <form id="personalInfoForm">
                            <div class="form-group">
                                <input type="hidden" id="userId" th:value="${session.memberId != null ? session.memberId : ''}" th:if="${session.memberId != null}">
                                <input type="hidden" id="memberId" th:value="${session.memberId != null ? session.memberId : ''}" th:if="${session.memberId != null}">
                                <label for="address" class="control-label">收货地址:</label>
                                <input type="text" class="form-control" id="address" name="address" placeholder="请输入收货地址" th:value="${address}" required="true">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="saveButton">确认</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="clear"></div>
    </div>
</div>

<div th:replace="mall/footer::footer-fragment"></div>
<!-- 页面底部 -->

<!-- jQuery -->
<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 3 -->
<script th:src="@{/mall/js/bootstrap3.js}"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
<script th:src="@{/admin/plugins/sweetalert2/sweetalert2.all.min.js}"></script>
<script th:src="@{/mall/js/order-settle.js}" type="text/javascript"></script>
<script th:src="@{/mall/js/bootstrap3.js}"></script>

<script>
    /**
     * 页面加载完成后初始化事件监听器
     * 监听商品链接点击事件，并发送点击数据到后端进行埋点追踪
     */
    $(document).ready(function() {
        // 监听所有商品链接点击事件，假设所有商品链接都在 #flash, #recommend 这类容器内
        // 你可以根据实际结构调整选择器
        $("#flash, #recommend, #sub_banner").on("click", "a", function(event) {
            var $link = $(this);
            var href = $link.attr("href");
            var id = $link.data("id");
            var name = $link.data("name");

            // 如果没有data-id，尝试从href中提取数字ID，假设URL是item/detail/123这种格式
            if (!id && href) {
                var match = href.match(/(\d+)/);
                if (match) {
                    id = match[1];
                }
            }

            if (!name) {
                // 如果没有data-name，可以用链接文本或空字符串
                name = $link.find(".name").text() || $link.text() || "";
            }

            var eventData = {
                productId: id || "unknown",
                productName: name || "unknown",
                timestamp: new Date().toISOString()
            };

            /**
             * 发送点击事件埋点数据到后端
             * @param {string} url - 请求地址
             * @param {string} method - HTTP方法
             * @param {string} contentType - 内容类型
             * @param {object} data - 要发送的数据
             * @param {function} success - 成功回调
             * @param {function} error - 失败回调
             */
            $.ajax({
                url: '/api/track/click',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(eventData),
                success: function() {
                    console.log("点击事件已发送：", eventData);
                },
                error: function(err) {
                    console.error("点击事件发送失败：", err);
                }
            });
        });
    });
</script>
</body>
</html>